<template>
  <div class="fullpage-container ">
    <div class="fullpage-wp" v-fullpage="opts" ref="example">
      <div class="page-1 page">
        <p class="part-1" v-animate="{value: 'bounceInLeft'}">fullpage-vue1111</p>
      </div>
      <div class="page-2 page">
        <p class="part-2" v-animate="{value: 'bounceInRight'}">fullpage-vue22222</p>
      </div>
      <div class="page-3 page">
        <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">fullpage-vue33333</p>
        <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">fullpage-vue33333</p>
        <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">fullpage-vue3333333333</p>
      </div>
    </div>
    <div class="nextbtn">
      <el-button @click="moveNext">next</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        // beforeChange: function (currentSlideEl,currenIndex,nextIndex) {
        // },
        // afterChange: function (currentSlideEl,currenIndex,nextIndex) {
        // }
      }
    }
  },
  methods: {
    moveNext() {
      this.$refs.example.$fullpage.moveNext(); //Move to the next page
    }
  }
}
</script>
<style>
.fullpage-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}
.page{
  margin-top: 150px;
}
.nextbtn {
   height: 60px;

   bottom: 0;
   width: 100%;
   font-size: 13px;
   text-align: center;
   line-height: 60px;
   margin: 0 0 0 0;
   color: #eee;
   position: fixed;
   z-index: 30000;
  margin-bottom: 100px;
 }


</style>